<!-- 放置需要展示的组件示例 -->
<template>
  <div class="main">
    <div>
      <div class="container">
        <DdNumberAnimate :value="number" textMaxWidth="22.5px"></DdNumberAnimate>
      </div>
      <DdSelectAll style="width: 450px" v-model:value="value" :options="options" size="large"></DdSelectAll>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue"

const value = ref([1, 2]);
const options = [
  { label: "张三", value: 1 },
  { label: "李四", value: 2 },
  { label: "王五", value: 3 },
];

const number = ref(52167317);
let flag = 0;
let start = 0;
const updateNumber = (timestamp) => {
  if (timestamp) {
    const elapsed = timestamp - start;
    if (elapsed >= 2000) {
      start = timestamp;
      number.value += 1000;
    }
  }

  flag = requestAnimationFrame(updateNumber);
};
onMounted(() => {
  // updateNumber();
});

onUnmounted(() => {
  // cancelAnimationFrame(flag);
});
</script>

<style lang="less" scoped>
.main{
  padding: 20px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: white;
  background-color: black;
  margin-bottom: 15px;

  :deep(.num-line) {
    font-size: 34px;
    line-height: 1;
    font-weight: bold;
  }
}
</style>
